<template>
  <div class="login">
    <!-- 导航栏区域 -->
    <van-nav-bar title="登录" left-arrow @click-left="onBack">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <!-- 表单区域 -->
    <van-form @submit="onSubmit" class="loginForm">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" class="submit"
          >登录
        </van-button>
      </div>
      <div class="info">
        <span>手机号登录</span>
        <span>快速注册</span>
      </div>
    </van-form>
    <tabbar></tabbar>
  </div>
</template>

<script>
// 引入想要使用的组件
import tabbar from "../../components//myTabbar/index.vue";

import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  components: {
    tabbar,
  },
  methods: {
    onBack() {
      this.$router.back(-1);
    },
    onSubmit() {
      // console.log("submit", values);
      const userInfo = {
        name: "zoe",
        avatar: "1234",
      };
      const token = "wqdejfnisfieffurn";
      localStorage.setItem("userInfo", userInfo);
      localStorage.setItem("token", token);
      this.$toast("登录成功");
      // this.$router.push('/home');
      if (this.$route.query.from) {
        this.$router.push(this.$route.query.from);
      } else {
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style scoped>
.login {
  margin: 10px;
}
.submit {
  font-size: 20px;
  font-weight: 700;
}
.info {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #999;
}
</style>
